<template>
  <div class="wll_details">
    <!-- 详情页面 -->
    <div class="wll_destop">
      <p>
        <router-link class="wll_fhindex" tag="span" to="/course">&lt;</router-link>
        <span>课程详情</span>
        <img src="../../../static/course-img/share.png" alt />
      </p>
    </div>
    <div class="wll_div">
      <div class="wll_detdiv">
        <p>
          <span>{{info}}</span>
          <span>
            <van-icon name="star-o" v-show="!flg" @click="aa" />
            <van-icon name="star" color="red" v-show="flg" @click="ab" />
          </span>
        </p>
        <p>免费</p>
        <p>
          <span>共{{list.info.total_periods}}课时</span>
          <span>{{list.info.sales_num}}人已报名</span>
        </p>
        <p>
          <span>开课时间:</span>
          <span>{{list.info.start_play_year}}.12.10 17:00 ~2019.12.10 21:00</span>
        </p>
      </div>
      <div>
        <h2>教学团队</h2>
        <ul>
          <li>
            <img class="wll_img1" :src="list.teachers[0].teacher_avatar" alt />
            <p>{{list.teachers[0].teacher_name}}</p>
          </li>
        </ul>
      </div>
      <div>
        <h2>课程介绍</h2>
        <div v-html="list.info.course_details"></div>
      </div>
      <div>
        <h2>课程大纲</h2>
        <ul>
          <li>
            <div class="wll_coldiv">
              <p>
                <span>{{info}}</span>
                <!-- <span>{{}}</span> -->
              </p>
              <p></p>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <img src="../../../static/course-img/pic2.png" alt />
      </div>
    </div>
    <div class="wll_desfood">
      <h2 @click="bao" v-if="!flg1">立即报名</h2>
      <h2 @click="bao1" v-if="flg1">立即学习</h2>
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant';
import http1 from "../../uti/http";
import http from "../../http/http";
//引入axios请求器
import axios from "axios";
export default {
  name: "Details",
  data() {
    return {
      flg: false,
      // wll_details:[],
      // id:"",
      // collect:JSON.parse(localStorage.getItem("collect")) || []
      list: {},
      info: {},
      id: "",
      collect_id: "",
      flg1:false
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    var courseTypeq = this.$route.query.courseType;
    var token = this.$store.state.User.token;
     var aa=http('get','https://www.365msmk.com/api/app/courseInfo/basis_id='+this.id+'?',{ headers: { Authorization: "Bearer " + token }});
    aa.then(res=>{
        console.log(res.data.data);
        this.list=res.data.data;
        this.info=res.data.data.info.title;
        if(this.list.info.is_collect==0){//--->为0，没有收藏，为1，已收藏
            this.flg=false;
        }else{
            this.flg=true;
        }
        if(this.list.info.is_buy==0){//--->为0，没有购买，立即报名
        //--->为1，已报名购买，立即学习
            this.flg1=false;
        }else{
            this.flg1=true;
        }
    })
  },
  methods: {
    bao() {
      //--->点击立即报名
      //思路：判断是否有token，有的话直接跳转页面，没有的话，跳转到登录
      // var login = localStorage.getItem("login"); //-->登录时，储存到本地的token令牌
      // if (login) {
          var token=this.$store.state.User.token;
          this.axios.post('https://www.365msmk.com/api/app/order/downOrder',{
              shop_id:parseInt(this.id),
              type: 5
          },{ headers: { Authorization: "Bearer " + token }}).then(res=>{
              console.log(res);
              if(res.data.code==200){
                this.flg1=true;
                this.axios.get('https://www.365msmk.com/api/app/courseInfo/basis_id='+this.id+'?',{ headers: { Authorization: "Bearer " + token }}).then(res=>{
                    console.log(res)
                })
              }
                
          })
        // this.$router.push({ name: "bao", query: { id: this.id } });
      // } else {
            //  this.$router.push("/login");
      // }
    },
    bao1(){//--->点击立即学习
        this.$router.push({ name: "bao", query: { id: this.id } });
    },
    aa() {
      //--->当点击取消的时候，id为空，这时就要从新获取id的值
      // this.id=this.$route.query.id;
      var token = this.$store.state.User.token;
      this.flg = !this.flg;
      // this.$store.commit('xiang',this.id);
    //   this.$http1
    //     .post(
    //       "/api/app/collect",
    //       { course_basis_id: this.id, type: 1 },
    //       { headers: { Authorization: "Bearer " + token } }
    //     )
    //     .then(res => {
    //       this.$http1
    //         .get("/api/app/courseInfo/basis_id="+this.id+"?", {
    //           headers: { Authorization: "Bearer " + token }
    //         })
    //         .then(res => {
    //           this.collect_id = res.info.collect_id;
    //           this.$store.commit("shou", res);
    //           this.$store.commit("_id", this.id);
    //           this.$toast("已收藏成功");
    //         });
    //     });
           this.axios.post('https://www.365msmk.com/api/app/collect',{
          course_basis_id: this.id,
          type: 1
      },{headers: { Authorization: "Bearer " + token }}).then(res=>{

          if(res.data.code==200){
              this.axios.get('https://www.365msmk.com/api/app/courseInfo/basis_id='+this.id+'?',{headers: { Authorization: "Bearer " + token }}).then(res=>{
                      console.log(res);
                      this.collect_id=res.data.data.info.collect_id
                      this.$store.commit('shou',res.data.data);
                      this.$store.commit('_id',this.id);
                       this.$toast("已收藏成功");
              })
          }
      })
    },
    ab() {
      var token = this.$store.state.User.token;
      this.flg = !this.flg;

      // this.id='';//--->这是让id的值为空
      // this.$store.commit('xiang',this.id);
    //   this.$http1
    //     .put(
    //       "/api/app/collect/cancel/" + this.collect_id + "/1",
    //       {},
    //       { headers: { Authorization: "Bearer " + token } }
    //     )
    //     .then(res => {
    //       this.$http1
    //         .get("/api/app/courseInfo/basis_id=" + this.id + "?", {
    //           headers: { Authorization: "Bearer " + token }
    //         })
    //         .then(res => {
    //           this.$store.commit("shou", res);
    //           this.$toast("已取消收藏");
    //         });
    //     });
      this.axios.put('https://www.365msmk.com/api/app/collect/cancel/'+this.collect_id+'/1',{},{headers: { Authorization: "Bearer " + token }}).then(res=>{
          console.log(res);
          if(res.data.code==200){
                this.axios.get('https://www.365msmk.com/api/app/courseInfo/basis_id='+this.id+'?',{headers: { Authorization: "Bearer " + token }}).then(res=>{
                  console.log(res);
                  // this.collect_id=res.data.data.info.collect_id
                  this.$store.commit('shou',res.data.data);
                   this.$toast("已取消收藏");
          })
          }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
body,
html,
.wll_details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .wll_details {
    // width: 100%;
    background: #f1f2f5;
    .wll_destop {
      // width: 100%;
      height: 0.74rem;
      background: #ffffff;
      border-bottom: 1px solid #f1f2f5;
      p {
        width: 5.86rem;
        height: 0.74rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 0.26rem;
        }
        img {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
    }
    .wll_div {
      // width: 100%;
      flex: 1;
      overflow: auto;
      .wll_detdiv {
        width: 100%;
        height: 2.43rem;
        background: #ffffff;
        p:nth-of-type(1) {
          width: 5.86rem;
          height: 0.54rem;
          margin: 0 auto;
          padding-top: 0.36rem;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 0.26rem;
          }
          img {
            width: 0.34rem;
            height: 0.34rem;
          }
        }
        p:nth-of-type(2) {
          width: 5.86rem;
          height: 0.4rem;
          font-size: 0.26rem;
          margin: 0 auto;
          // padding-top: 0.16rem;
          color: #ee732e;
          display: flex;
          justify-content: space-between;
        }
        p:nth-of-type(3) {
          width: 5.86rem;
          height: 0.4rem;
          font-size: 0.24rem;
          color: #8a857f;
          margin: 0 auto;
          span:nth-of-type(1) {
            display: inline-block;
            width: 1rem;
            height: 0.2rem;
            border-right: 2px solid #98989a;
          }
        }
        p:nth-of-type(4) {
          width: 5.86rem;
          margin: 0 auto;
          font-size: 0.24rem;
          color: #8a857f;
        }
      }
      div:nth-of-type(2) {
        // width: 100%;
        height: 2.42rem;
        background: #ffffff;
        margin-top: 0.26rem;
        h2 {
          width: 5.86rem;
          display: flex;
          margin: 0 auto;
          padding-top: 0.2rem;
          font-size: 0.26rem;
        }
        ul {
          width: 5.86rem;
          height: 1.88rem;
          margin: 0 auto;
          display: flex;
          align-items: center;
          li {
            width: 1.1rem;
            height: 0.98rem;
            line-height: 0.36rem;

            img {
              width: 0.36rem;
              height: 0.36rem;
              margin: 0 auto;
              display: block;
              border-radius: 50%;
            }
            p {
              color: #b0b0b0;
              line-height: 0.36rem;
              margin-left: 20px;
              text-align: center;
            }
          }
        }
      }
      div:nth-of-type(3) {
        // width: 100%;
        height: 1.08rem;
        margin-top: 0.26rem;
        background: #ffffff;
        h2 {
          width: 5.86rem;
          margin: 0 auto;
          padding-top: 0.26rem;
        }
        p {
          width: 5.86rem;
          margin: 0 auto;
          padding-top: 0.26rem;
        }
      }
      div:nth-of-type(4) {
        // width: 100%;
        margin-top: 0.3rem;
        background: #ffffff;
        padding: 0.26rem;
        h2 {
          width: 5.8rem;
        }
        ul {
          width: 5.8rem;
        }
      }
      div:nth-of-type(5) {
        // width: 100%;
        height: 3.46rem;
        background: #ffffff;
        img {
          width: 2.56rem;
          height: 2.76rem;
          margin: 0 auto;
          display: block;
        }
      }
    }
    .wll_desfood {
      // width: 100%;
      height: 86px;
      margin-top: 20px;
      h2 {
        width: 100%;
        height: 86px;
        margin-top: 20px;
        background: #ee732e;
        color: #ffffff;
        text-align: center;
        line-height: 86px;
      }
    }
  }
}

</style>